import * as vscode from 'vscode';
import * as path from 'path';

/**
 * WebView HTML生成器，提供一致的HTML样式和结构
 */
export class HtmlGenerator {
    /**
     * 生成标准头部HTML
     */
    public static generateHeader(title: string): string {
        return `
            <!DOCTYPE html>
            <html lang="zh-CN">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>${title}</title>
                <style>
                    body {
                        font-family: var(--vscode-font-family);
                        font-size: var(--vscode-font-size);
                        color: var(--vscode-foreground);
                        background-color: var(--vscode-editor-background);
                        padding: 10px;
                    }
                    .tab {
                        overflow: hidden;
                        border-bottom: 1px solid var(--vscode-panel-border);
                    }
                    .tab button {
                        background-color: inherit;
                        float: left;
                        border: none;
                        outline: none;
                        cursor: pointer;
                        padding: 10px 16px;
                        transition: 0.3s;
                        color: var(--vscode-foreground);
                    }
                    .tab button:hover {
                        background-color: var(--vscode-list-hoverBackground);
                    }
                    .tab button.active {
                        background-color: var(--vscode-list-activeSelectionBackground);
                        color: var(--vscode-list-activeSelectionForeground);
                    }
                    .tabcontent {
                        display: none;
                        padding: 6px 12px;
                    }
                    table {
                        border-collapse: collapse;
                        width: 100%;
                    }
                    th, td {
                        text-align: left;
                        padding: 8px;
                        border-bottom: 1px solid var(--vscode-panel-border);
                    }
                    tr:hover {
                        background-color: var(--vscode-list-hoverBackground);
                    }
                    .conflict {
                        color: var(--vscode-errorForeground);
                        font-weight: bold;
                    }
                    .action-button {
                        background-color: var(--vscode-button-background);
                        color: var(--vscode-button-foreground);
                        border: none;
                        padding: 5px 10px;
                        cursor: pointer;
                        margin-right: 5px;
                    }
                    .toolbar {
                        margin-bottom: 10px;
                    }
                    .tree-container {
                        font-family: monospace;
                        white-space: nowrap;
                        overflow: auto;
                        max-height: 600px;
                    }
                </style>
            </head>
            <body>
        `;
    }
    
    /**
     * 生成标准页脚HTML
     */
    public static generateFooter(): string {
        return `
            </body>
            </html>
        `;
    }
    
    /**
     * 生成标准制表符脚本
     */
    public static generateTabScript(): string {
        return `
            <script>
            const vscode = acquireVsCodeApi();
            
            function openTab(evt, tabName) {
                var i, tabcontent, tablinks;
                
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }
                
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }
                
                document.getElementById(tabName).style.display = "block";
                evt.currentTarget.className += " active";
            }
            </script>
        `;
    }
}
